import Layout from "../../../components/layout"; // import { data } from "../../../lib/testData"; // import { aniData } from "../../../lib/infoData"; import Image from "next/image"; import VideoPlayer from "../../../components/videoPlayer"; import Link from "next/link"; import { closestMatch } from "closest-match"; import Head from "next/head"; import { useEffect, useState } from "react"; import Modal from "../../../components/modal"; import { useNotification } from "../../../lib/useNotify"; import { useSession, signIn, signOut } from "next-auth/react"; import AniList from "../../../components/media/aniList"; import { AnimatePresence, motion as m } from "framer-motion"; import Navbar from "../../../components/navbar"; import { Navigasi } from "../.."; export default function Info({ info }) { const { data: session, status } = useSession(); const title = info.aniData.title.romaji || info.aniData.title.english; const data = info.aniData; const fallback = info.epiFallback; const { Notification: NotificationComponent, show } = useNotification(); // console.log(session); const playingEpisode = data.episodes .filter((item) => item.id == info.id) .map((item) => item.number); const [open, setOpen] = useState(false); const [aniStatus, setAniStatus] = useState(""); const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode)); const handleStatus = (e) => { setAniStatus(e.target.value); }; const handleProgress = (e) => { const value = parseFloat(e.target.value); if (!isNaN(value) && value >= 0 && value <= data.totalEpisodes) { setAniProgress(value); } }; const handleSubmit = (e) => { e.preventDefault(); const formData = { status: aniStatus, progress: aniProgress }; console.log(formData); }; const playingTitle = data.episodes .filter((item) => item.id == info.id) .map((item) => item.title); if (status === "loading") { return

Loading...

; } console.log(); return ( <> {fallback ? data.title.romaji || data.title.english : playingTitle} setOpen(false)}>

Save this Anime to Your List

{!session && ( )} {session && ( <>
)}
{data.episodes.length > 0 ? ( data.episodes .filter((items) => items.id == info.id) .map((item) => (
{item.title}

Episode {item.number}

)) ) : ( <> {fallback .filter((item) => item.id == info.id) .map((item) => (
{title}

Episode {item.number}

))} )}
Anime Cover

Studios

{data.studios}
setOpen(true)}> {/* Save to My List */}

Status

{data.status}

Titles

{data.title.romaji || ""}
{data.title.english || ""}
{data.title.native || ""}
{data.genres.map((item, index) => (
{item}
))}

Episodes

{data.episodes.length > 0 ? data.episodes.map((item) => { return (
image Episode {item.number} {item.id == info.id && (
)}

{item.title}

{item.description}

); }) : fallback.map((item) => { return ( Episode {item.number} ); })}
); } export async function getServerSideProps(context) { const { info } = context.query; if (!info) { return { notFound: true, }; } const id = info[0]; const aniId = info[1]; const seek = info[2] || 0; let epiFallback = null; const res = await fetch(`https://api.moopa.my.id/meta/anilist/watch/${id}`); const epiData = await res.json(); const res2 = await fetch( `https://api.moopa.my.id/meta/anilist/info/${aniId}` ); const aniData = await res2.json(); if (aniData.episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ aniData.title.romaji || aniData.title.english }` ); const data = await res.json(); const match = closestMatch( aniData.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); epiFallback = infos.episodes; } } return { props: { info: { id, seek, epiData, aniData, epiFallback, }, }, }; }